<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图片的位置</title>
        <style type="text/css">
            .wrapper {
                background-color: #1e9fff; /* 背景颜色 */
                background-image: url("yewen.jpg") ; /* 背景图片 */
                background-repeat: no-repeat ; /* repeat | repeat-x | repeat-y | no-repeat*/
                margin: 30px auto ;
            }

            .first {
                width: 500px ;
                height: 400px ;
                background-size: 250px 200px ;
                background-position: center ;
            }

            .second {
                width: 500px ;
                height: 400px ;
                background-size: 80% 80% ;
                background-position: top center;
            }

            .third {
                width: 800px ;
                height: 200px ;
                background-size: cover ;
            }

            .fourth {
                width: 400px ;
                height: 800px ;
                background-size: contain ;
            }
        </style>
    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <div class="wrapper fourth"></div>

    </body>
</html>